<!DOCTYPE html>

<style>
.scroller {
  /* Opaque background by default. */
  background: blue;
  /* Stacking context by default. */
  position: relative;
  z-index: 1;
}

.transparent {
  opacity: 0.5;
}

.transform {
  transform: scale(0.8);
}

.background-not-opaque {
  background: rgba(255, 0, 0, 0.5);
}

.cant-paint-scrolling-background {
  background: url(), white local
}

.border-radius {
  border: 2px solid;
  border-radius: 20px;
}

.clip {
  position: absolute;
  clip: rect(0px,120px,120px,0px);
}

.clip-path {
  clip-path: circle(115px at 20px 20px);
}

.box-shadow {
  box-shadow: 10px 10px 5px #888888;
}

.inset-box-shadow {
  box-shadow: 10px 10px 5px #888888 inset;
}

.composited {
  will-change:transform;
}

.content {
  height: 500px;
}

.non-stacking-context {
  z-index: auto;
}

div {
  overflow: scroll;
  width: 200px;
  height: 300px;
  background: green;
}

body {
    height: 2000px;
}
</style>

<div class="scroller" id="scroller1">
  <div class="content" id="content1"></div>
</div>
<div class="scroller" id="scroller2">
  <div class="content"></div>
</div>
